<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left">
        <el-input style="width: 220px;" size="small" clearable @clear="clearNickname"
          v-model.trim="search_val.dickLabel" placeholder="请输入字典标签">
          <el-button class="el-input-group__append2" slot="append"
            :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick"></el-button>
        </el-input>
      </div>
      <div class="header_right">
        <el-button size="small" icon="el-icon-plus" style="margin-left: 15px" @click="onAdd">
          新增
        </el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" height="calc(100% - 65px)" class="table" :header-cell-style="headerStyle">
        <el-table-column align="center" label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column align="center" prop="dickLabel" label="字典标签" min-width="140">
          <template slot-scope="scope">
            <span
              v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{
                scope.row.dickLabel }}</span>
            <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{ scope.row.dickLabel
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="dickValue" label="字典键值" min-width="140">
        </el-table-column>
        <el-table-column align="center" prop="dickSort" label="字典排序" min-width="140" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="dickDefinition" label="备注" min-width="140" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" min-width="140">
        </el-table-column>
        <el-table-column align="center" prop="management" label="操作" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
              <i @click="onEdit(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
              <i @click="onDel(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="getDataList"
        :pageSizes="[10, 20, 30, 50]" class="pagination" />
    </div>

    <addDictData ref="refAddSystemSetup" :id="$route.params.dictId"></addDictData>
    <editDictData ref="refEditSystemSetup" :editInfo="editInfo"></editDictData>

  </div>
</template>

<script>
import addDictData from "./components/addDictData.vue";
import editDictData from "./components/editDictData.vue";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqDictDataRemove, reqDictDataPage } from "@/api/api";

export default {
  name: "",
  components: {
    addDictData,
    editDictData,
    Pagination,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      loadingSearch: false, //查询按钮loading
      configKey: "",
      page: 1,
      limit: 10,
      total: 0,
      tableData: [],
      editInfo: {},
      search_val: {
        dickLabel: '',
      },
    };
  },
  mounted() { },
  computed: {},
  methods: {
    // 清空
    clearNickname() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },
    //查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
    },
    // 新增
    onAdd() {
      this.$refs.refAddSystemSetup.dialogVisible = true;
    },
    onEdit(item) {
      // console.log(item, "item");
      this.editInfo = JSON.parse(JSON.stringify(item)); //深拷贝
      this.$refs.refEditSystemSetup.dialogVisible = true;
    },
    onDel(id) {
      this.$confirm("此操作将永久删除该字典数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqDictDataRemove(id);
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("删除字典数据成功");
          this.getDataList();
        })
        .catch(() => { });
    },

    // 获取列表
    async getDataList() {
      let res = await reqDictDataPage(this.page, this.limit, {
        dictId: this.dictId,
        dickLabel: this.search_val.dickLabel
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.rows;
      this.total = res.data.total;
    },
  },
  created() {
    this.dictId = this.$route.params && this.$route.params.dictId;
    this.getDataList()
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

::v-deep .header_right .el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}
</style>